<script>
import '../../plugins/content'
</script>
<template>
<div class="wrapper" v-loading="loading">
    <div class="con">
        <el-divider content-position="left">
            <el-switch v-model="isPoject" active-text="项目订单" inactive-text="一般订单">
            </el-switch>
        </el-divider>
        <!-- <el-row :gutter="20" class="projectRow" v-if="isPoject">
            <el-col :span="6">
                <el-input v-model="selectStrVal" placeholder="项目名称\项目编号\项目备注" clearable prefix-icon="el-icon-search">
                </el-input>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="el-icon-search" @click="selectEvent"></el-button>
            </el-col>
            <el-col :span="16">
                <ul class="expand-wrapper">
                        <li>
                            <span>项目编号：</span>
                            <span style="margin-left: 40px">项目名称：</span>
                            <span style="margin-left: 40px">项目负责人:</span>
                            <span style="margin-left: 40px">项目备注:</span>
                        </li>
                    </ul>
            </el-col>
        </el-row> -->
        <!-- 表单部分 -->
        <vxe-table ref="xTable" stripe border show-overflow highlight-current-row highlight-hover-row align="center" :data="tableData" height="610px" :checkbox-config="{trigger: 'row', highlight: true, range: true}">
            <vxe-column type="checkbox" width="35" fixed="left"></vxe-column>
            <vxe-column type="seq" title="序号" width="50"></vxe-column>
            <vxe-column type="expand" width="50" title="明细">
                <template #content="{ row }">
                    <ul class="expand-wrapper">
                        <li>
                            <span>材料：{{ row.order_material }}</span>
                            <span style="margin-left: 40px">工艺：{{ row.order_craft }}</span>
                            <span style="margin-left: 40px">规格：{{ row.order_specs }}</span>
                            <span style="margin-left: 40px">本司任务：{{ row.task_list }}</span>
                            <span style="margin-left: 40px">外包：{{ row.outsource_list }}</span>
                        </li>
                    </ul>
                </template>
            </vxe-column>
            <vxe-column field="order_single_order_id" title="订单编号" width="155" :filters="[{data: ''}]" :filter-render="{name: 'ElInput'}"></vxe-column>
            <vxe-column field="customer_name" title="客户名称" width="250" :filters="[{data: ''}]" :filter-render="{name: 'ElInput'}"></vxe-column>
            <vxe-column field="order_goods_name" title="名称" width="250" :filters="[{data: ''}]" :filter-render="{name: 'ElInput'}"></vxe-column>
            <vxe-column field="order_status" title="订单状态" width="125" :filters="[{data: []}]" :filter-render="{name: 'ElSelect', options: statusList, props: {multiple: true}}">
                <template #default="{ row }">{{ selectOrderStatus({ row }) }}</template>
            </vxe-column>
            <vxe-column field="category_name" title="类别" width="120"></vxe-column>
            <vxe-column field="order_over_date" title="交货日期" width="120"></vxe-column>
            <vxe-column field="order_count" title="数量" width="60"></vxe-column>
            <vxe-column field="unit_name" title="单位" width="60"></vxe-column>
            <vxe-column field="order_price" title="单价" width="100"></vxe-column>
            <vxe-column field="order_amount" title="金额" width="100"></vxe-column>
            <vxe-column field="order_remark" title="备注" width="120" :filters="[{data: ''}]" :filter-render="{name: 'ElInput'}"></vxe-column>
            <!-- <vxe-column title="操作" fixed="right" width="120px">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete-solid" size="mini" @click.native.prevent="deleteTableRow(scope.$index, tableData)"></el-button>
                </template>
            </vxe-column> -->
        </vxe-table>
        <!-- <el-dialog title="高级查询" :visible.sync="advancedDialogVisible" width="30%" :before-close="handleClose" append-to-body>
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="advancedDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog> -->
    </div>
</div>
</template>

<style lang="less" scoped>
.con {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    padding: 20px;
}
.projectRow{
    margin-bottom: 20px;
}
</style>

<script>
export default {
    data() {
        return {
            loading: true,
            isPoject: false,
            selectStrVal: '',
            tableData: [],
            advancedDialogVisible: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一年',
                    onClick(picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
                        picker.$emit('pick', [start, end])
                    }
                }]
            },
            selectDate: [(new Date() - 3600 * 1000 * 24 * 30), new Date()],
            statusList: [{
                    label: '制单',
                    value: '制单'
                },
                {
                    label: '工作中',
                    value: '工作中'
                },
                {
                    label: '完成',
                    value: '完成'
                },
                {
                    label: '未收款',
                    value: '未收款'
                },
                {
                    label: '部分收款',
                    value: '部分收款'
                },
                {
                    label: '已收款',
                    value: '已收款'
                }
            ]
        }
    },
    methods: {
        showAdvancedDialog() {
            this.advancedDialogVisible = true
        },
        selectOrderStatus({row}) {
            let statusStr = null
            let status = '制单'
            const workStatusList = row.work_status_list
            const outsourceStatusList = row.outsource_status_list
            if (workStatusList !== null) {
                statusStr += ',' + workStatusList
            }
            if (outsourceStatusList !== null) {
                statusStr += ',' + outsourceStatusList
            }
            switch (true) {
                case statusStr === null:
                    status = '完成'
                    break
                case (statusStr.indexOf('0') === -1):
                    status = '完成'
                    break
                case (statusStr.indexOf('1') === -1):
                    status = '制单'
                    break
                default:
                    status = '工作中'
                    break
            }
            row.order_status = status
            return status
        },
        // 查询数据方法
        async selectDataMethod() {
            // let selectVal = []
            const {
                data: res
            } = await this.$http.post('select_order')
            this.tableData = res
            console.log(res)
        },
        selectEvent() {
            // console.log(this.selectDate)
        }
    },
    async mounted() {
        await this.selectDataMethod()
        this.loading = false
    }
}
</script>
